<template>
    <div class="login">
        <el-row>
            <el-col :span="4" :offset="9">
                <el-form :label-position="'left'" label-width="90px">
                    <el-form-item label="邮箱：">
                        <el-input v-model="email"></el-input>
                    </el-form-item>
                    <el-form-item label="密码：">
                        <el-input v-model="password" show-password></el-input>
                    </el-form-item>
                      <el-form-item>
                        <el-button type="primary" @click="login">登录</el-button>
                      </el-form-item>
                </el-form>
                <el-button @click="menu('register')" size="mini">注册</el-button>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { Message } from 'element-ui'
import {postRequest,getRequest} from '../utils/api.js'

 import Cookie from 'js-cookie'
export default {
    name: 'Login',
    data() {
        return {
            email:"",
            password:""   
        } 
    },

    methods: {

        menu(menu){
            this.$router.push({
            name:menu
            })
      },
        login(){
            var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;//正则表达式
            if(!reg.test(this.email)){
                Message.error({message:'邮箱格式不正确'})
                return;
            }
                // 将请求进行包装

                postRequest('/user/user/login',{
                    email:this.email,
                    password: this.password
                }).then(result=>{
                    // 如果返回有数据，说明（登录）请求成功
                    if(result){
                        console.log("登录响应的数据",result);
                        Cookie.set('avatar',result);
                        this.$router.push({
                            name:'home',
                        })
                    }
                
                }).catch((err)=>{

                })
        }
        }

};
</script>

<style scoped>
    .login{
        padding: 50px;
        height: 800px;
         /* background-image: url("../assets/backgroundImg.jpeg"); */
        background-repeat: no-repeat;
         background-size:cover;
    }
  

</style>